<template>
	<view class="pages overflow-auto pad-b-80">
		<view class="mar-10 border-rad-3 border-type-1">
			<view
				v-for="(item, index) in tableData"
				:key="index"
				class="flex align-center"
				:style="{
					borderBottom: index !== tableData.length -1 ? '1px #e6e6e6 solid' : 'none',
				}"
			>
				<view class="flex align-center w-px-130 pad-x-5" style="min-height: 26px;">
					<text class="color-ff0000 mar-r-5" :style="{ opacity: item.isRequired ? 1 : 0 }">*</text>
					<text>{{ item.DESCR }}</text>
				</view>
				
				<view
					class="flex flex-1 align-center"
					:style="{
						borderLeft: '1px #e6e6e6 solid',
						minHeight: '26px',
						padding: item.TYPE !== 'textarea' ? '10px 10px' : '10px 0px',
					}"
				>
					<text v-if="item.TYPE === 'disabled'" class="color-333333">{{ item.DESCR_CVAL }}</text>

					<view v-else class="w-100">
						<view v-if="item.TYPE === 'input'">
							<view
								v-if="item.DESCR === '车号'"
								class="flex align-center"
							>
								<input
									type="text"
									v-model="item.DESCR_CVAL"
									:placeholder="item.placeholder"
									style="color: #333333; height: 30px;"
									@blur="handleBlur($event, item)"
								/>
								
								<view class="w-px-80 mar-l-10">
									<u-button type="primary" color="#bd3124" @click="handleSearch()">查询</u-button>
								</view>
							</view>
							
							<view v-else>
								<input
									v-if="item.DESCR === '申请时间'"
									type="text"
									v-model="item.DESCR_CVAL"
									:placeholder="item.placeholder"
									:disabled="dates.isRead"
									style="color: #333333; height: 30px;"
									@focus="handleShowSelectDate(item)"
									@blur="handleBlur($event, item)"
								/>
								
								<input
									v-else
									type="text"
									v-model="item.DESCR_CVAL"
									:placeholder="item.placeholder"
									style="color: #333333; height: 30px;"
								/>
							</view>
						</view>
						
						<view v-else-if="item.TYPE === 'textarea'" class="w-100">
							<textarea
								v-model="item.DESCR_CVAL"
								:placeholder="item.placeholder"
								auto-height
								style="width: auto; color: #333333; margin: 10px; height: 30px;"
							></textarea>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="mar-10 border-rad-3 border-type-1">
			<view
				v-for="(item, index) in tableData2"
				:key="index"
				class="flex align-center"
				:style="{
					borderBottom: index !== tableData2.length -1 ? '1px #e6e6e6 solid' : 'none',
				}"
			>
				<view class="flex align-center w-px-130 pad-x-5" style="min-height: 26px;">
					<text class="color-ff0000 mar-r-5" :style="{ opacity: item.isRequired ? 1 : 0 }">*</text>
					<text>{{ item.DESCR }}</text>
				</view>
				
				<view
					class="flex flex-1 align-center"
					:style="{
						borderLeft: '1px #e6e6e6 solid',
						minHeight: '26px',
						padding: item.TYPE !== 'textarea' ? '10px 10px' : '10px 0px',
					}"
				>
					<text v-if="item.TYPE === 'disabled'" class="color-333333">{{ item.DESCR_CVAL }}</text>

					<view v-else class="w-100">
						<view v-if="item.TYPE === 'input'">
							<view
								v-if="item.DESCR === '车号'"
								class="flex align-center"
							>
								<input
									type="text"
									v-model="item.DESCR_CVAL"
									:placeholder="item.placeholder"
									style="color: #333333; height: 30px;"
									@blur="handleBlur($event, item)"
								/>
								
								<view class="w-px-80 mar-l-10">
									<u-button type="primary" color="#bd3124" @click="handleSearch()">查询</u-button>
								</view>
							</view>
							
							<input
								v-else
								type="text"
								v-model="item.DESCR_CVAL"
								:placeholder="item.placeholder"
								style="color: #333333; height: 30px;"
							/>
						</view>
						
						<view v-else-if="item.TYPE === 'textarea'" class="w-100">
							<textarea
								v-model="item.DESCR_CVAL"
								:placeholder="item.placeholder"
								auto-height
								style="width: auto; color: #333333; margin: 10px; height: 30px;"
							></textarea>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="pos-f flex align-center bg-white h-px-60 shadow-type-2 pad-x-10" style="left: 0; right: 0; bottom: 0;">
			<u-button type="primary" @click="handleSubmit()">提 交</u-button>
		</view>
		
		<!-- 服务日期控件 -->
		<u-datetime-picker
			ref="datetimePicker"
			v-model="dates.time"
			:show="dates.show"
			mode="date"
			:formatter="formatter"
			@confirm="handleSelectDate"
			@cancel="handleCloseSelectDate"
		></u-datetime-picker>
	</view>
</template>

<script>
	import Utils from '@/utils/utils'
	import { mapState } from 'vuex'
	import { convertLetterCase, getSystemDate } from '@/utils/lib'
	import { getCartInformation, submitApplyFor } from '@/apis/replaceApplyFor/index'
	
	export default {
		computed: {
			...mapState({
				token: state => state.user.token,
				longitude: state => state.user.longitude,
				latitude: state => state.user.latitude,
			})
		},
		
		data() {
			return {
				tableData: [], // 表格数据
				tableData2: [],
				
				// 服务日期选择控件
				dates: {
					show: false,
					time: Number(new Date()),
					isRead: false,
				},
			}
		},
		
		mounted() {
			this.findInfos()
		},
		
		methods: {
			// 根据车号查询异常反馈信息
			findInfos() {
				let data = [
					{
						DESCR: '车号',
						DESCR_CVAL: '',
						TYPE: 'input',
						placeholder: '请输入车号',
						isEdit: true,
						isRequired: true,
					}, {
						DESCR: '更换原因',
						DESCR_CVAL: '',
						TYPE: 'textarea',
						placeholder: '请输入更换原因',
						isEdit: true,
						isRequired: true,
					}, {
						DESCR: '申请人',
						DESCR_CVAL: '',
						TYPE: 'input',
						placeholder: '请输入申请人',
						isEdit: true,
						isRequired: true,
					}, {
						DESCR: '申请时间',
						DESCR_CVAL: '',
						TYPE: 'input',
						placeholder: '请选择申请时间',
						isEdit: true,
						isRequired: false,
					}, {
						DESCR: '申请所属机构',
						DESCR_CVAL: '',
						TYPE: 'disabled',
						placeholder: '请输入申请所属机构',
						isEdit: false,
						isRequired: false,
					}
				]
				
				let data2 = [
					{
						DESCR: '机械环保代码',
						DESCR_CVAL: '',
						TYPE: 'textarea',
						placeholder: '请输入机械环保代码',
						isEdit: true,
						isRequired: true,
					}, {
						DESCR: '变更前终端型号',
						DESCR_CVAL: '',
						TYPE: 'disabled',
						placeholder: '请输入变更前终端型号',
						isEdit: false,
						isRequired: false,
					}, {
						DESCR: '变更后终端型号',
						DESCR_CVAL: '',
						TYPE: 'textarea',
						placeholder: '请输入变更后终端型号',
						isEdit: true,
						isRequired: true,
					}, {
						DESCR: '变更前终端编号',
						DESCR_CVAL: '',
						TYPE: 'disabled',
						placeholder: '请输入变更前终端编号',
						isEdit: false,
						isRequired: false,
					}, {
						DESCR: '变更后终端编号',
						DESCR_CVAL: '',
						TYPE: 'textarea',
						placeholder: '请输入变更后终端编号',
						isEdit: true,
						isRequired: true,
					}, {
						DESCR: '变更前芯片型号',
						DESCR_CVAL: '',
						TYPE: 'disabled',
						placeholder: '请输入变更前芯片型号',
						isEdit: false,
						isRequired: false,
					}, {
						DESCR: '变更后芯片型号',
						DESCR_CVAL: '',
						TYPE: 'textarea',
						placeholder: '请输入变更后芯片型号',
						isEdit: true,
						isRequired: true,
					}, {
						DESCR: '变更前芯片ID',
						DESCR_CVAL: '',
						TYPE: 'disabled',
						placeholder: '请输入变更前芯片ID',
						isEdit: false,
						isRequired: false,
					}, {
						DESCR: '变更后芯片ID',
						DESCR_CVAL: '',
						TYPE: 'textarea',
						placeholder: '请输入变更后芯片ID',
						isEdit: true,
						isRequired: true,
					}
				]
				
				this.tableData = data
				this.tableData2 = data2
			},
			
			// 选择服务日期
			handleShowSelectDate() {
				this.dates.isRead = true
				this.dates.show = true
			},
			
			// 格式化日期
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				
				if (type === 'month') {
					return `${value}月`
				}
				
				if (type === 'day') {
					return `${value}日`
				}
				
				return value
			},
			
			// 选择日期
			handleSelectDate() {
				setTimeout(() => {
					this.tableData[3].DESCR_CVAL = getSystemDate(this.dates.time, 'yyyy-MM-dd')
					this.handleCloseSelectDate()
				}, 0)
			},
			
			// 关闭选择服务日期弹窗
			handleCloseSelectDate() {
				this.dates.time = Number(new Date())
				this.dates.isRead = false
				this.dates.show = false
			},
			
			// 查询
			handleSearch() {
				let cartNum = this.tableData[0].DESCR_CVAL
				
				if (!cartNum) {
					Utils.popUpMsg('none', '车号不得为空！', 1000)
					return
				}
				
				Utils.loading('查询中...')
				
				getCartInformation({ vehicleNumber: cartNum, token: this.token }).then(res => {
					uni.hideLoading()
					let result = res.Result
					
					this.tableData[1].DESCR_CVAL = result.feedbackDescription // 更换原因
					this.tableData[2].DESCR_CVAL = result.salesMan // 申请人
					this.tableData[3].DESCR_CVAL = result.feedbackDate // 申请时间（取系统当前时间）
					this.tableData[4].DESCR_CVAL = result.outletName // 申请所属机构
					this.tableData2[0].DESCR_CVAL = result.epCode // 机械环保代码
					this.tableData2[1].DESCR_CVAL = result.terminalUnitType // 变更前终端型号
					// this.tableData2[2].DESCR_CVAL = result.terminalUnitType // 变更后终端型号
					this.tableData2[3].DESCR_CVAL = result.terminalUnitNcode // 变更前终端编号
					// this.tableData2[4].DESCR_CVAL = result.terminalUnitNcode // 变更后终端编号
					this.tableData2[5].DESCR_CVAL = result.chipModel // 变更前芯片型号
					// this.tableData2[6].DESCR_CVAL = result.chipModel // 变更后芯片型号
					this.tableData2[7].DESCR_CVAL = result.chipModelID // 变更前芯片ID
					// this.tableData2[8].DESCR_CVAL = result.chipModelID // 变更后芯片ID
				}).catch(err => {
					uni.hideLoading()
				})
			},
			
			// 鼠标离开车号时的回调
			handleBlur(e, row) {
				row.DESCR_CVAL = convertLetterCase(e.target.value)
			},
			
			// 重置页面
			handleReset() {
				this.tableData.forEach(item => {
					item.DESCR_CVAL = ''
				})
				
				this.tableData2.forEach(item => {
					item.DESCR_CVAL = ''
				})
			},
			
			// 提交数据
			handleSubmit() {
				let vehicleNumber = this.tableData[0].DESCR_CVAL // 车号
				let renewalDescription = this.tableData[1].DESCR_CVAL // 更换原因
				let creatorUserName = this.tableData[2].DESCR_CVAL // 申请人
				let epCode = this.tableData2[0].DESCR_CVAL // 机械环保代码
				let terminalUnitType = this.tableData2[2].DESCR_CVAL // 变更后终端型号
				let terminalUnitNcode = this.tableData2[4].DESCR_CVAL // 变更后终端编号
				let chipModel = this.tableData2[6].DESCR_CVAL // 变更后芯片型号
				let chipModelID = this.tableData2[8].DESCR_CVAL // 变更后芯片ID
				
				if (!vehicleNumber) {
					Utils.popUpMsg('none', '车号不得为空！', 1000)
					return
				}
				
				if (!renewalDescription) {
					Utils.popUpMsg('none', '更换原因不得为空！', 1000)
					return
				}
				
				if (!creatorUserName) {
					Utils.popUpMsg('none', '申请人不得为空！', 1000)
					return
				}
				
				if (!epCode) {
					Utils.popUpMsg('none', '机械环保代码不得为空！', 1000)
					return
				}
				
				if (!terminalUnitType) {
					Utils.popUpMsg('none', '变更后终端型号不得为空！', 1000)
					return
				}
				
				if (!terminalUnitNcode) {
					Utils.popUpMsg('none', '变更后终端编号不得为空！', 1000)
					return
				}
				
				if (!chipModel) {
					Utils.popUpMsg('none', '变更后芯片型号不得为空！', 1000)
					return
				}
				
				if (!chipModelID) {
					Utils.popUpMsg('none', '变更后芯片ID不得为空！', 1000)
					return
				}
				
				let params = {
					vehicleNumber,
					renewalDescription,
					creatorUserName,
					epCode,
					terminalUnitType,
					terminalUnitNcode,
					chipModel,
					chipModelID,
					token: this.token,
					attachmentList: []
				}
				
				Utils.loading('正在提交反馈信息...')
				
				submitApplyFor(params).then(res => {
					uni.hideLoading()
					Utils.popUpMsg('success', res.Message, 1000)
					this.handleReset()
				}).catch(err => {
					uni.hideLoading()
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.pages {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: #fff;
	}
</style>

